<template>
  <div>
    <h1>{{msg}}</h1>
    {{poss}}
    {{add}}
    <div id="gd-map"></div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      poss: {},
      add: '',
    };
  },
  mounted() {
    let that = this;
    //geolocation.getCurrentPosition获取设备当前位置
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        console.log('获取地理位置成功', pos.coords);
        //重新赋值
        // coords坐标
        this.poss = {
          longitude: pos.coords.longitude, //longitude经度
          latitude: pos.coords.latitude, //latitude纬度
        };
        //地图显示
        let map = new AMap.Map('gd-map', {
          zoom: 15,
          center: [pos.coords.longitude, pos.coords.latitude],
        });
        //逆向地理编码：通过经纬度获取
        AMap.plugin('AMap.Geocoder', function () {
          //AMap.Geocoder构造函数
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: '012',
          });
          var lnglat = [pos.coords.longitude, pos.coords.latitude];
          //  var lnglat = [91.6,29.4];
          console.log('经纬度是', lnglat);
          //getAddress根据给定坐标进行解析当status为complete时，
          // result为错误信息info成功状态说明
          geocoder.getAddress(lnglat, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {//complete完成
              // result为对应的地理位置详细信息
              console.log('你所在的位置是', result);
              that.add = result.regeocode.formattedAddress;//获取是上海所在的位置
            }
            console.log('逆向地理编码', result);
          });
        });
      },
      (err) => {
        console.log('获取地理位置信息错误', err);
      }
    );
  },
  //监听
  watch: {
    poss(val) {
      console.log('poss的值发生变化:', val);
    },
    // poss: {
    //   hanlder: function (val) {
    //     console.log('poss的值发生变化:', val);
    //   },
    //   deep: true,
    // },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#gd-map {
  width: 100%;
  height: 500px;
}
</style>
